<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Herbert personnal web</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/icon-font.css" />
  </head>

  <body>
    <div class="navigation">
      <input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
      <label for="navi-toggle" class="navigation__button">
        <span class="navigation__icon"> &nbsp; </span>
      </label>
      <div class="navigation__background">&nbsp;</div>
      <div class="navigation__nav">
        <ul class="navigation__list">
          <li class="navigation__item">
            <a href="#" class="navigation__link">About Natous </a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">Your benfits </a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">Popilar tours </a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">Stories </a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link">Book now </a>
          </li>
        </ul>
      </div>
    </div>
    <header class="header">
      <div class="header__logo-box">
        <img src="./img/logo.png" alt="Logo" class="header__logo" />
      </div>
      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main">Outdoors</span>
          <span class="heading-primary--sub">is where life happens</span>
        </h1>
        <a href="#section-tours" class="btn btn--white btn--animated">
          Discover our tours
        </a>
      </div>
    </header>

    <main>
      <section class="section-about">
        <div class="u-center-text u-margin-bottom-large">
          <h2 class="heading-secondary">Exciting for adventurous people</h2>
        </div>
        <div class="row">
          <div class="col-1-of-2">
            <h3 class="heading-tertiary u-margin-bottom-small">
              You are going to full in love with nature!
            </h3>
            <p class="paragraph">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Cupiditate ex expedita sint, ullam placeat officiis sunt
              architecto est quis delectus ipsa voluptate veritatis sit dolore
              animi blanditiis quod veniam praesentium?
            </p>
            <h3 class="heading-tertiary u-margin-bottom-small">
              Live adventures like you never have before
            </h3>
            <p class="paragraph">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio
              doloribus repellat qui id ad facere provident cupiditate, beatae
              sapiente quasi ipsum mollitia libero reprehenderit eligendi nam
              nisi voluptatum sint rerum.
            </p>
            <a href="javascript:void(0)" class="btn-text">Learn more &rarr;</a>
          </div>
          <div class="col-1-of-2">
            <div class="composition">
              <img
                src="./img/composition-photo1.jpg"
                alt="photo1"
                class="composition__photo composition__photo--p1"
              /><img
                src="./img/composition-photo2.jpg"
                alt="photo2"
                class="composition__photo composition__photo--p2"
              /><img
                src="./img/composition-photo3.jpg"
                alt="photo3"
                class="composition__photo composition__photo--p3"
              />
            </div>
          </div>
        </div>
      </section>

      <section class="section-features">
        <div class="row">
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-world"></i>
              <h3 class="heading-tertiary u-margin-bottom-small">
                expore the world
              </h3>
              <p class="feature-box__text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-compass"></i>
              <h3 class="heading-tertiary u-margin-bottom-small">
                expore the world
              </h3>
              <p class="feature-box__text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-map"></i>
              <h3 class="heading-tertiary u-margin-bottom-small">
                expore the world
              </h3>
              <p class="feature-box__text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-heart"></i>
              <h3 class="heading-tertiary u-margin-bottom-small">
                expore the world
              </h3>
              <p class="feature-box__text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="section-tours" id="section-tours">
        <div class="u-center-text u-margin-bottom-large">
          <h2 class="heading-secondary">Most popular tours</h2>
        </div>
        <div class="row">
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front card__side--front--1">
                <div class="card__picture card__picture--1">&nbsp;</div>
                <h4 class="card__heading">
                  <span class="card__heading-span card__heading-span--1"
                    >The Sea Explorer</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>3 days tours</li>
                    <li>Up to 30 people</li>
                    <li>2 hours guides</li>
                    <li>Sleep in cozy hotels</li>
                    <li>Difficulty: easy</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back--1">
                <div class="card__cta">
                  <div class="card__price-box">
                    <div class="card__price-only">only</div>
                    <div class="card__price-value">$297</div>
                  </div>
                  <a href="#popup" class="btn btn--white">Buy now!</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front card__side--front--2">
                <div class="card__picture card__picture--2">&nbsp;</div>
                <h4 class="card__heading">
                  <span class="card__heading-span card__heading-span--2"
                    >The Sea Explorer</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>3 days tours</li>
                    <li>Up to 30 people</li>
                    <li>2 hours guides</li>
                    <li>Sleep in cozy hotels</li>
                    <li>Difficulty: easy</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back--2">
                <div class="card__cta">
                  <div class="card__price-box">
                    <div class="card__price-only">only</div>
                    <div class="card__price-value">$297</div>
                  </div>
                  <a href="#popup" class="btn btn--white">Buy now!</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front card__side--front--3">
                <div class="card__picture card__picture--3">&nbsp;</div>
                <h4 class="card__heading">
                  <span class="card__heading-span card__heading-span--3"
                    >The Sea Explorer</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>3 days tours</li>
                    <li>Up to 30 people</li>
                    <li>2 hours guides</li>
                    <li>Sleep in cozy hotels</li>
                    <li>Difficulty: easy</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back--3">
                <div class="card__cta">
                  <div class="card__price-box">
                    <div class="card__price-only">only</div>
                    <div class="card__price-value">$897</div>
                  </div>
                  <a href="#popup" class="btn btn--white">Buy now!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="u-center-text u-margin-top-big">
          <a href="#" class="btn btn--green">Discover all tours</a>
        </div>
      </section>

      <section class="section-stories">
        <div class="bg-video">
          <video class="bg-video__content" autoplay muted loop>
            <source src="img/video.mp4" type="video/mp4" />
            Your browser is not support!
          </video>
        </div>
        <div class="u-center-text u-margin-bottom-large">
          <h2 class="heading-secondary">We make people genuinely happy</h2>
        </div>
        <div class="row">
          <div class="story">
            <figure class="story__shape">
              <img
                src="/img/story--1.jpg"
                alt="flower in purple"
                class="story__img"
              />
              <figcaption class="story__caption">Mary Smith</figcaption>
            </figure>
            <div class="story__text">
              <h3 class="heading-tertiary">
                I had the best week ever with my family
              </h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
                accusantium vel repellendus ratione corporis. Mollitia,
                dignissimos, dolorum ducimus similique temporibus voluptate eum
                quibusdam, veniam atque neque quod excepturi cumque autem!
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="story">
            <figure class="story__shape">
              <img
                src="/img/story--2.jpg"
                alt="flower in purple"
                class="story__img"
              />
              <figcaption class="story__caption">Jack Wilson</figcaption>
            </figure>
            <div class="story__text">
              <h3 class="heading-tertiary">
                I had the best week ever with my family
              </h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
                accusantium vel repellendus ratione corporis. Mollitia,
                dignissimos, dolorum ducimus similique temporibus voluptate eum
                quibusdam, veniam atque neque quod excepturi cumque autem!
              </p>
            </div>
          </div>
        </div>
        <div class="u-center-text u-margin-top-big">
          <a href="#" class="btn-text">Read all stories &rarr;</a>
        </div>
      </section>

      <section class="section-book">
        <div class="row">
          <div class="book">
            <div class="book__form">
              <form action="#" class="form">
                <div>
                  <h2 class="heading-secondary u-margin-bottom-medium">
                    Start Booking Now!
                  </h2>
                </div>
                <div class="form__group">
                  <input
                    type="text"
                    class="form__input"
                    placeholder="full name"
                    required
                    id="name"
                  />
                  <label for="name" class="form__label">Full name</label>
                </div>
                <div class="form__group">
                  <input
                    type="email"
                    class="form__input"
                    placeholder="email address"
                    required
                    id="email"
                  />
                  <label for="email" class="form__label">Email Address</label>
                </div>
                <div class="form__group u-margin-bottom-medium">
                  <div class="form__radio-group">
                    <input
                      type="radio"
                      class="form__radio-input"
                      id="small"
                      name="size"
                    />
                    <label for="small" class="form__radio-label">
                      <span class="form__radio-button"></span>
                      Small tour group</label
                    >
                  </div>
                  <div class="form__radio-group">
                    <input
                      type="radio"
                      class="form__radio-input"
                      id="large"
                      name="size"
                    />
                    <label for="large" class="form__radio-label">
                      <span class="form__radio-button"></span>
                      Large tour group</label
                    >
                  </div>
                </div>
                <div class="form__group">
                  <button class="btn btn--green">Next step &rarr;</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer__logo-box">
        <img src="img/logo.png" alt="Our logo" class="footer__logo" />
      </div>
      <div class="row">
        <div class="col-1-of-2">
          <div class="footer__navigation">
            <ul class="footer__list">
              <li class="footer__item">
                <a href="#" class="footer__link">Company</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Contact us</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Company</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Company</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Company</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-1-of-2">
          <div class="footer__copyright">
            Build my <a href="#" class="footer__link">Herbert</a>for his study
          </div>
        </div>
      </div>
    </footer>
    <div class="popup" id="popup">
      <div class="popup__content">
        <div class="popup__left">
          <img
            src="img/card-picture--1.jpg"
            alt="Tour photo"
            class="popup__img"
          />
          <img
            src="img/composition-photo1.jpg"
            alt="Tour photo2"
            class="popup__img"
          />
        </div>
        <div class="popup__right">
          <a href="#section-tours" class="popup__close">&times;</a>
          <h2 class="heading-secondary">Start booking now!</h2>
          <h3 class="heading-tertiary">
            Important &ndash; Please read these terms before booking
          </h3>
          <p class="popup__text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, vel
            porro. Veniam cumque perspiciatis qui asperiores cupiditate. Magni
            explicabo expedita aspernatur! Iste saepe autem ullam dolorum nisi
            dignissimos quod possimus.
          </p>
          <a href="#" class="btn btn--green">Book now</a>
        </div>
      </div>
    </div>
  </body>
</html>
